<!--官网首页container-->
<template>
  <div class="index-container">
    <div class="pad-btm">
      <div class="index-container-img">
        <img class="mes-logo" src="../../../static/home_banner.jpg" alt="">
        <div class="index-search-box">
          <div class="index-search-inside-box">
            <h1>{{$t('m.FindyournexthometobuyorrentinMyanmar')}}</h1>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane :label="$t('m.Buy')" name="first">
                <el-form :inline="true" :model="searchForm" class="search-form">
                  <el-form-item label="">
                    <el-select v-model="searchForm.regionId" clearable :placeholder="$t('m.Region')" size="mini" @change="getTownships($event)" placement="bottom">
                      <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select
                      multiple
                      collapse-tags
                      v-model="searchForm.townshipId" :placeholder="$t('m.Township')" size="mini">
                      <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select v-model="searchForm.propertyTypeId" clearable :placeholder="$t('m.PropertyType')" size="mini" @change="getSubType($event)">
                      <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select
                      multiple
                      collapse-tags
                      v-model="searchForm.propertySubTypeId" size="mini" :placeholder="$t('m.Propertysubtype')" >
                      <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <!--<el-form-item label="">-->
                  <!--<el-input v-model="searchForm.user" placeholder="" size="mini"></el-input>-->
                  <!--</el-form-item>-->
                  <el-form-item class="price-input-btn">
                    <el-popover
                      ref="popover"
                      placement="bottom"
                      width="300"
                      trigger="click">
                      <el-row>
                        <el-col :span="9">
                          <el-input type="number" v-model="searchForm.minPrice" :maxlength="18" :placeholder="$t('m.Min')" size="mini"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: center">
                          -
                        </el-col>
                        <el-col :span="9">
                          <el-input type="number" v-model="searchForm.MaxPrice" :maxlength="18" :placeholder="$t('m.Max')" size="mini"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: center;line-height: 200%;">
                          <span v-if="isHostel">Ks</span>
                          <span v-else>Lks</span>
                        </el-col>
                      </el-row>
                    </el-popover>
                    <el-button v-popover:popover size="mini">
                      {{$t('m.Price')}} <i class="el-icon-arrow-down"></i>
                    </el-button>
                  </el-form-item>

                  <el-form-item class="sub-input-btn">
                    <el-button type="warning" @click="searchSubmit" size="mini">{{$t('m.Search')}}</el-button>
                  </el-form-item>

                </el-form>
              </el-tab-pane>
              <el-tab-pane :label="$t('m.NewDevelopment')" name="second">
                <el-form :inline="true" :model="searchForm" class="search-form">
                  <el-form-item label="">
                    <el-select v-model="searchForm.regionId" clearable :placeholder="$t('m.Region')" size="mini" @change="getTownships($event)" placement="bottom">
                      <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select
                      multiple
                      collapse-tags
                      v-model="searchForm.townshipId" :placeholder="$t('m.Township')" size="mini">
                      <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select v-model="searchForm.propertyTypeId" clearable :placeholder="$t('m.PropertyType')" size="mini" @change="getSubType($event)">
                      <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select
                      multiple
                      collapse-tags
                      v-model="searchForm.propertySubTypeId" size="mini" :placeholder="$t('m.Propertysubtype')" >
                      <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <!--<el-form-item label="">-->
                  <!--<el-input v-model="searchForm.user" placeholder="" size="mini"></el-input>-->
                  <!--</el-form-item>-->
                  <el-form-item class="price-input-btn">
                    <el-popover
                      ref="popover"
                      placement="bottom"
                      width="300"
                      trigger="click">
                      <el-row>
                        <el-col :span="9">
                          <el-input type="number" v-model="searchForm.minPrice" :maxlength="18" :placeholder="$t('m.Min')" size="mini"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: center">
                          -
                        </el-col>
                        <el-col :span="9">
                          <el-input type="number" v-model="searchForm.MaxPrice" :maxlength="18" :placeholder="$t('m.Max')" size="mini"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: center;line-height: 200%;">
                          <span v-if="isHostel">Ks</span>
                          <span v-else>Lks</span>
                        </el-col>
                      </el-row>
                    </el-popover>
                    <el-button v-popover:popover size="mini">
                      {{$t('m.Price')}} <i class="el-icon-arrow-down"></i>
                    </el-button>
                  </el-form-item>

                  <el-form-item class="sub-input-btn">
                    <el-button type="warning" @click="searchSubmit" size="mini">{{$t('m.Search')}}</el-button>
                  </el-form-item>

                </el-form>
              </el-tab-pane>
              <el-tab-pane :label="$t('m.Rent')" name="third" >
                <el-form :inline="true" :model="searchForm" class="search-form">
                  <el-form-item label="">
                    <el-select v-model="searchForm.regionId" clearable :placeholder="$t('m.Region')" size="mini" @change="getTownships($event)" placement="bottom">
                      <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select
                      multiple
                      collapse-tags
                      v-model="searchForm.townshipId" :placeholder="$t('m.Township')" size="mini">
                      <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select v-model="searchForm.propertyTypeId" clearable :placeholder="$t('m.PropertyType')" size="mini" @change="getSubType($event)">
                      <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select
                      multiple
                      collapse-tags
                      v-model="searchForm.propertySubTypeId" size="mini" :placeholder="$t('m.Propertysubtype')" >
                      <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <!--<el-form-item label="">-->
                  <!--<el-input v-model="searchForm.user" placeholder="" size="mini"></el-input>-->
                  <!--</el-form-item>-->
                  <el-form-item class="price-input-btn">
                    <el-popover
                      ref="popover"
                      placement="bottom"
                      width="300"
                      trigger="click">
                      <el-row>
                        <el-col :span="9">
                          <el-input type="number" v-model="searchForm.minPrice" :maxlength="18" :placeholder="$t('m.Min')" size="mini"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: center">
                          -
                        </el-col>
                        <el-col :span="9">
                          <el-input type="number" v-model="searchForm.MaxPrice" :maxlength="18" :placeholder="$t('m.Max')" size="mini"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: center;line-height: 200%;">
                          <span v-if="isHostel">Ks</span>
                          <span v-else>Lks</span>
                        </el-col>
                      </el-row>
                    </el-popover>
                    <el-button v-popover:popover size="mini">
                      {{$t('m.Price')}} <i class="el-icon-arrow-down"></i>
                    </el-button>
                  </el-form-item>

                  <el-form-item class="sub-input-btn">
                    <el-button type="warning" @click="searchSubmit" size="mini">{{$t('m.Search')}}</el-button>
                  </el-form-item>

                </el-form>
              </el-tab-pane>
              <el-tab-pane :label="$t('m.Hostel')" name="fourth">
                <el-form :inline="true" :model="searchForm" class="search-form">
                  <el-form-item label="">
                    <el-select v-model="searchForm.regionId" clearable :placeholder="$t('m.Region')" size="mini" @change="getTownships($event)" placement="bottom">
                      <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="">
                    <el-select
                      multiple
                      collapse-tags
                      v-model="searchForm.townshipId" :placeholder="$t('m.Township')" size="mini">
                      <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="">
                    <el-select v-model="searchForm.hostelType" clearable :placeholder="$t('m.Hosteltype')" size="mini">
                      <el-option v-for="rg in hostelTypes" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <!--<el-form-item label="">-->
                    <!--<el-select v-model="searchForm.propertyTypeId" placeholder="Property Type" size="mini" @change="getSubType($event)">-->
                      <!--<el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>-->
                    <!--</el-select>-->
                  <!--</el-form-item>-->

                  <!--<el-form-item label="">-->
                    <!--<el-select-->
                      <!--multiple-->
                      <!--collapse-tags-->
                      <!--v-model="searchForm.propertySubTypeId" size="mini" placeholder="Property Sub Type" >-->
                      <!--<el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>-->
                    <!--</el-select>-->
                  <!--</el-form-item>-->

                  <!--<el-form-item label="">-->
                  <!--<el-input v-model="searchForm.user" placeholder="" size="mini"></el-input>-->
                  <!--</el-form-item>-->
                  <el-form-item class="price-input-btn">
                    <el-popover
                      ref="popover"
                      placement="bottom"
                      width="300"
                      trigger="click">
                      <el-row>
                        <el-col :span="9">
                          <el-input type="number" v-model="searchForm.minPrice" :maxlength="18" :placeholder="$t('m.Min')" size="mini"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: center">
                          -
                        </el-col>
                        <el-col :span="9">
                          <el-input type="number" v-model="searchForm.MaxPrice" :maxlength="18" :placeholder="$t('m.Max')" size="mini"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: center;line-height: 200%;">
                          <span v-if="isHostel">Ks</span>
                          <span v-else>Lks</span>
                        </el-col>
                      </el-row>
                    </el-popover>
                    <el-button v-popover:popover size="mini">
                      {{$t('m.Price')}} <i class="el-icon-arrow-down"></i>
                    </el-button>
                  </el-form-item>

                  <el-form-item class="sub-input-btn">
                    <el-button type="warning" @click="searchSubmit" size="mini">{{$t('m.Search')}}</el-button>
                  </el-form-item>

                </el-form>
              </el-tab-pane>
            </el-tabs>

          </div>
        </div>
      </div>
      <section>
        <div class="nav-icon-box">
          <div class="nav-icon-list">
            <img src="../../../static/box1.png" alt="">
            <h6>{{$t('m.Allthefeaturesyouneed')}}</h6>
            <p>{{$t('m.Roomtypefloorlevelmap')}}</p>
          </div>
          <div class="nav-icon-list">
            <img src="../../../static/box2.png" alt="">
            <h6>{{$t('m.Powerfulforallpropertytypes')}}</h6>
            <p>{{$t('m.Fromcondotolandedproperty')}}</p>
          </div>
          <div class="nav-icon-list">
            <img src="../../../static/box3.png" alt="">
            <h6>{{$t('m.Simplemobilefriendlydesign')}}</h6>
            <p>{{$t('m.Ourbeautifulappsarefree')}}</p>
          </div>
          <div class="nav-icon-list">
            <img src="../../../static/box4.png" alt="">
            <h6>{{$t('m.Alwaysgettingbetter')}}</h6>
            <p>{{$t('m.Werealwaysbuildingnewtoolsandfeatures')}}</p>
          </div>
        </div>
      </section>
      <div class="index-container-img download-container">
        <img class="mes-logo" src="../../../static/download_banner.png" alt="">
        <div class="download-container-info">
          <h2 class="h2">{{$t('m.FastEasy')}}</h2>
          <p>{{$t('m.Buysellrentpropertyanytimeanywhere')}}</p>
          <div class="download-box">
            <div class="download-left-box">
              <a href="https://play.google.com/store/apps/details?id=com.tushengwanwu.bestproperty" onclick="ga('send', 'event','Google','click','https://play.google.com/store/apps/')" class="download-google"><img src="../../../static/google-play.png" alt=""></a>
              <a href="http://bestproperty.com.mm/download/consumer/bestproperty.apk" onclick="ga('send', 'event','Download','click','http://bestproperty.com.mm/download/consumer/')" class="download-apk">Download Android</a>
            </div>
            <div class="download-right-box">
              <img src="../../../static/ewm.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="nav-list-box">
        <h2 >{{$t('m.Alltheinformationyouneedtofind')}}</h2>
        <div class="nav-list">
          <div class="flex-1">
            <img src="../../../static/nav-list-img1.jpg" alt="">
          </div>
          <div class="flex-2 margin-lf">
            <div class="max-len">
            <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon1-1.png" alt="">
              </i>
              <p class="title title-green">{{$t('m.Detailedinformation')}}</p>
              <p class="tro-info">{{$t('m.Viewpropertywithpriceroomtypefloor')}}</p>
            </span>
              <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon1-2.png" alt="">
              </i>
              <p class="title title-pink">{{$t('m.PowerfulSearch')}}</p>
              <p class="tro-info">{{$t('m.Searchbymasterbedroomfloorleve')}}</p>
            </span>
              <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon1-3.png" alt="">
              </i>
              <p class="title title-yellow">{{$t('m.FindbyMap')}}</p>
              <p class="tro-info">{{$t('m.Viewshopsmarketbusstop')}}</p>
            </span>
              <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon1-4.png" alt="">
              </i>
              <p class="title title-orange">{{$t('m.PriceperSquareFeet')}}</p>
              <p class="tro-info">{{$t('m.Comparepropertyby')}}</p>
            </span>
            </div>
          </div>
        </div>
      </div>
      <div class="nav-list-box">
        <div class="nav-list">
          <div class="flex-2">
            <div class="max-len">
            <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon2-1.png" alt="">
              </i>
              <p class="title title-bus">{{$t('m.BusStop')}}</p>
              <p class="tro-info">{{$t('m.Showallthebusstop')}}</p>
            </span>
              <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon2-2.png" alt="">
              </i>
              <p class="title title-chat">{{$t('m.Chat')}}</p>
              <p class="tro-info">{{$t('m.Onlinechatingbetweenbuyerseller')}}</p>
            </span>
              <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon2-3.png" alt="">
              </i>
              <p class="title title-save">{{$t('m.Savecompare')}}</p>
              <p class="tro-info">{{$t('m.Saveandcompareallpropertiesthatmatchyourrequiremtns')}}</p>
            </span>
              <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon2-4.png" alt="">
              </i>
              <p class="title title-free">{{$t('m.FreeFastEasy')}}</p>
              <p class="tro-info">{{$t('m.Downloadforfreeandfindproperty')}}</p>
            </span>
            </div>
          </div>
          <div class="flex-1 margin-lf">
            <img src="../../../static/nav-list-img2.png" alt="">
          </div>
        </div>
      </div>
      <div class="nav-list-box nav-list-box1" style="border-bottom: none;">
        <div class="nav-list">
          <div class="flex-1">
            <img src="../../../static/nav-list-img3.jpg" alt="">
          </div>
          <div class="flex-2 margin-lf">
            <div class="max-len">
            <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon3-1.png" alt="">
              </i>
              <p class="tro-info">{{$t('m.Advertisetoreachmillionsof')}}</p>
            </span>
              <span class="map-txt">
              <i class="i-icon1">
                <img src="../../../static/icon3-2.png" alt="">
              </i>
              <p class="tro-info">{{$t('m.Mobileandwebsoftwarespecially')}}</p>
            </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index-footer-box">
      <div class="index-footer">
        <router-link to="/businessClass" class="footer-items">
          <h3>{{$t('m.Products')}}</h3>
          <p>{{$t('m.AgentDeveloperHostellandlord')}}</p>
        </router-link>
        <router-link to="/contact" class="footer-items">
          <h3>{{$t('m.Aboutus')}}</h3>
          <p>{{$t('m.Contact')}}</p>
        </router-link>
        <a href="https://www.facebook.com/bestpropertymyanmar" target="_blank" onclick="ga('send', 'event','Facebook','click','https://www.facebook.com/')" class="footer-items">
          <h3>{{$t('m.Followus')}}</h3>
          <p>Facebook</p>
        </a>
        <p class="pte-ltd">2017 &copy; Bestproperty Pte Ltd.</p>
      </div>
    </div>
  </div>
</template>

<script>
  // 英语josn
  import regions from '@/json/region'
  import townships from '@/json/township'
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import hostelTypes from '@/json/hostelTypes'

  // 缅甸语json
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_hostelTypes from '@/mmJson/hostelTypes'
  export default {
    name: 'mainPage',
    data () {
      return {
        activeName: 'first',
        isHostel: false,
        // regions: regions,
        // propertyType: propertyType,
        townships: [],
        propertySubType: [],
        searchForm: {
          user: '',
          regionId: 2,
          townshipId: [],
          propertyTypeId: null,
          propertySubTypeId: [],
          hostelType: null,
          minPrice: null,
          MaxPrice: null,
        }
      }
    },
    computed: {
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        } else {
          return regions
        }
      },
      propertyType() {
        if (this.$store.state.localLang == 'MM') {
          return mm_propertyType
        } else {
          return propertyType
        }
      },
      hostelTypes(){
        if(this.$store.state.localLang == 'MM'){
          return mm_hostelTypes
        }else {
          return hostelTypes
        }
      },
    },
    methods: {
      handleClick(tab) {
        if (tab.name == "fourth") {
          this.isHostel = true
        } else {
          this.isHostel = false
        }
      },
      getTownships (regionId) {
        let town = []
        this.townships = []
        this.searchForm.townshipId = []
        if(this.$store.state.localLang == 'MM'){
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      getSubType (type) {
        let subType = []
        this.propertySubType = []
        this.searchForm.propertySubTypeId = []
        if(this.$store.state.localLang == 'MM'){
          for (var t of mm_propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }else {
          for (var t of propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }
        this.propertySubType = subType
      },
      searchSubmit (){
        let path = ''
        if (this.activeName == 'first') {
          path = '/buy'
          this.$router.push({
            path:path,
            query:{
              regionId:this.searchForm.regionId,
              townshipId:this.searchForm.townshipId,
              propertyTypeId:this.searchForm.propertyTypeId,
              propertySubTypeId:this.searchForm.propertySubTypeId,
              minPrice:this.searchForm.minPrice,
              MaxPrice:this.searchForm.MaxPrice,
            }
          })
        } else if (this.activeName == 'second') {
          path = 'newDevelopment'
          this.$router.push({
            path:path,
            query:{
              regionId:this.searchForm.regionId,
              townshipId:this.searchForm.townshipId,
              propertyTypeId:this.searchForm.propertyTypeId,
              propertySubTypeId:this.searchForm.propertySubTypeId,
              minPrice:this.searchForm.minPrice,
              MaxPrice:this.searchForm.MaxPrice,
            }
          })
        } else if (this.activeName == 'third') {
          path = '/rent'
          this.$router.push({
            path:path,
            query:{
              regionId:this.searchForm.regionId,
              townshipId:this.searchForm.townshipId,
              propertyTypeId:this.searchForm.propertyTypeId,
              propertySubTypeId:this.searchForm.propertySubTypeId,
              minPrice:this.searchForm.minPrice,
              MaxPrice:this.searchForm.MaxPrice,
            }
          })
        } else if (this.activeName == 'fourth') {
          path = '/hostel'
          this.$router.push({
            path:path,
            query:{
              regionId:this.searchForm.regionId,
              townshipId:this.searchForm.townshipId,
              hostelType:this.searchForm.hostelType,
              minPrice:this.searchForm.minPrice,
              MaxPrice:this.searchForm.MaxPrice,
            }
          })
        }
      }
    },
    mounted () {
      this.getTownships (this.searchForm.regionId)
    }
  }
</script>
<style>
  .index-container a{
    cursor: pointer;
    text-decoration: none;
    color: #2c3e50;
  }
  .index-container{
    font-size:16px;
  }
  .index-container .el-button--default{
    background-color: #fff!important;
    color: #333!important;
    /*color: #c0c4cc!important;*/
    border-color: #fff!important;
  }
  .index-container-img{
    position: relative;
  }
  .index-container-img img{
    width:100%;
    height: 100%;
    display: block;
  }
  .index-container .box-border {
    border-bottom: 1px solid #e0e0e0 !important
  }
  .index-container .nav-icon-box {
    display: flex;
    /*padding: 3.8em 14em*/
    width: 75%;
    padding: 3.8em 0;
    margin: 0 auto;
  }
  .index-container .nav-icon-list {
    padding: 0 1em;
    text-align: center;
    flex: 1
  }
  .index-container .nav-icon-list h6 {
    margin: .6em 0 .75em;
    color: #3e3e3e;
    font-weight: 700;
    font-size: 1em;
    line-height: 2em
  }

  .index-container .nav-icon-list p {
    color: #888;
    text-align: center;
    font-size: 0.9em;
    line-height: 180%;
    font-family: Open Sans, sans-serif;
  }
  .index-container .nav-icon-box .nav-icon-list img {
    display: block;
    margin: 0 auto;
    width: 5.2em
  }
  .index-container .download-container-info{
    font-size: 14px;
    position: absolute;
    top: 0;
    width:27%;
    max-width: 300px;
    height: 300px;
    margin-left: 18%;
    /*background: #6f7180;*/
    padding-top: 3em;
  }
  .index-container .download-container-info .h2{
    margin: .5em 0;
    white-space: nowrap;
    text-align: left;
    font-weight: 400;
    font-size: 40px;
    color: rgb(255, 153, 0)
  }
  .index-container .download-container-info p{
    margin: .5em 0;
    transform: scale(1);
    transform-origin: left top 0px;
    text-overflow: clip;
    white-space: normal;
    text-align: left;
    text-decoration: none;
    user-select: text;
    color: rgb(102, 102, 102);
    font-size:1.4em;
  }
  .index-container .download-container img{
    max-height: 550px;
  }
  .index-container .download-box{
    display: flex;
  }
  .index-container .download-box .download-left-box{
    flex: 2.6;
  }
  .index-container .download-box .download-right-box{
    flex: 2;
    margin: 1em 2em 1em 0;
  }
  .index-container .download-box a{
    display: block;
    margin: 1.3em .3em .4em .3em;
    width: 9em;
    height: 3.3em;
    border-radius: 4px;
    color: #fff;
    line-height: 3.3em;
    text-decoration: none;
    text-align: center;
  }
  .index-container .download-box a.download-apk{
    background: #2ecc71;
  }
  .index-container .nav-list-box{
    border-bottom: 1px solid #e0e0e0;
    padding: 3em 0;
  }
  .index-container .nav-list-box h2{
    white-space: nowrap;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    color: rgb(255, 153, 0);
  }
  .index-container .nav-list{
    display: flex;
    margin: 0 auto;
    width: 55%;
    padding: 2em 0;
  }
  .index-container .nav-list-box1 .nav-list .flex-1{
    flex:1;
  }
  .index-container .nav-list-box1 .nav-list .flex-1 img{
    max-width: 550px;
  }
  .index-container .nav-list-box1 .nav-list .flex-2{
    flex:1;
  }
  .index-container .nav-list img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .index-container .nav-list .flex-1 {
    flex: 1.3;
  }
  .index-container .nav-list .flex-2 {
    flex: 2;
  }
  .index-container .margin-lf{margin-left:4em;}
  .index-container .nav-list .flex-1 img{
    max-width:380px;
  }
  .index-container .nav-list span.map-txt{
    position: relative;
    display: flex;
    margin-bottom: 1.5em;
    margin-left: 5px;
    padding-left: 4.5em;
    /*height: 55px;*/
    min-height: 55px;
    line-height: 150%;
    justify-content: space-around;
    flex-direction: column
  }
  .index-container .nav-list span.map-txt i{
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-block;
    width: 55px;
    height: 55px;
    margin-top:-27.5px;
  }
  .index-container .nav-list span.map-txt i img{
    width:100%;
    display: block;
  }
  .index-container .nav-list span.map-txt p{
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    text-align: left;
  }
  .index-container .nav-list span.map-txt p.title{
    font-size: 18px;
  }
  .title-green{
    color: rgb(3, 224, 120);
  }
  .title-pink{
    color: rgb(255, 0, 89);
  }
  .title-yellow{
    color: rgb(255, 186, 0);
  }
  .title-orange{
    color: rgb(255, 102, 0);
  }
  .title-bus{
    color: rgb(21, 82, 248);
  }
  .title-chat{
    color: rgb(0, 214, 255);
  }
  .title-save{
    color: rgb(255, 0, 112);
  }
  .title-free{
    color: rgb(145, 0, 255);
  }
  .index-container .index-footer-box{
    background: rgb(242, 242, 242);
  }
  .index-container .index-footer{
    padding:2em 0;
    width: 75%;
    margin:0 auto;
  }
  .index-container .index-footer h3{
    margin:0;
    font-size: 1.05em;
  }
  .index-container .index-footer p{
    margin: .5em 0;
    font-size: 0.9em;
  }
  .index-container .index-footer .footer-items{
    display: inline-block;
    min-width: 220px;
    margin-right: 1.5em;
  }
  .index-container .index-footer .pte-ltd{
    margin: 3.5em 0 0 0;
  }
  .index-container .index-search-box{
    text-align: center;
    color:#fff;
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
  }
  .index-container .index-search-inside-box{
    /*width: 54%;*/
    min-width: 780px;
    max-width:61%;
    margin:0 auto;
    padding:10px 20px;
    background: rgba(10,10,10,.8);
    margin-bottom: 170px;
  }
  .index-container .index-search-inside-box h1{
    margin: 0;
    font-weight: 400;
    margin-bottom: 20px;
  }
  .index-container .index-search-inside-box .el-tabs__nav-wrap::after{
    height: 0;
    background: none;
  }
  .index-container .index-search-inside-box .el-tabs__item{
    color:#fff;
  }
  .index-container .index-search-inside-box .el-tabs__item.is-active, .index-container .index-search-inside-box  .el-tabs__item:hover{
    color: rgb(255, 153, 0);
  }
  .index-container .index-search-inside-box .el-tabs__active-bar{
    background: none;
  }
  .index-container .index-search-inside-box .el-tabs__header{
    margin-bottom:0;
  }
  .index-container .index-search-inside-box .search-form{
    text-align: left;
    min-width: 780px;
  }
  .index-container .index-search-inside-box .search-form .el-button--warning{
    background-color:rgb(255, 153, 0) !important;
    border-color: rgb(255, 153, 0) !important;
  }
  .index-container .pad-btm{
    padding-bottom:182px;
  }
  .index-container .index-footer-box{
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
  }
  .index-container .el-form--inline .el-form-item__content{
    overflow:hidden;
    width: 100%;
  }
  .index-container .el-form--inline .el-form-item__content .el-tag--info:nth-child(2){
    display: none;
  }
  .index-container .el-form--inline .el-form-item__content .el-select{
    width:100%;
  }
  .index-container .el-form--inline .el-form-item{width: 18%;}
  .index-container .el-form--inline .price-input-btn {width: 101px;}
  .index-container .el-form--inline .sub-input-btn {
    width: 85px;
    margin-right: 0;
  }
  .index-container .el-tabs__item{
    font-size: 15.6px;
  }
</style>
